var my={
	init(){
		let self=this;
		self.photo={
			data:[],
			showData:[],
		};
		self.albums=[{id:0,name:'默認相冊',photos:[]}];//相冊list
		self.currentAlbumsId=0;//當前相冊id
		self.photosList=[];
		//分頁顯示
		self.pagging={
			page:1,
			pageSize:5,
			total:0,
		}
		document.querySelector("#addButton").onclick=self.addAlbum;
		document.querySelector("#commitPhoto").onclick=self.addPhoto;
		document.querySelector("#fileInput").onchange=self.photoInput;
		self.albumName=document.querySelector("#albumName");//相冊名字
		self.albumList=document.querySelector("#albumList");//相冊div
		self.photoList=document.querySelector("#photoList");//圖片div\
		self.fileInput=document.querySelector("#fileInput");//獲取文件上次節點
		/***********************分頁模塊*******************/
		self.disablePrev=true;//上一頁是否可點擊
		self.disableNext=true;//下一頁是否可點擊
		self.pageTotal=document.querySelector("#pageTotal");//縂頁數
		self.pageCurrentPage=document.querySelector("#pageCurrentPage");//當前頁
		self.pagePrevValue=document.querySelector("#pagePrev");
		self.pageNextValue=document.querySelector("#pageNext");
		document.querySelector("#pagePrev").onclick=self.pagePrev;//上一頁
		document.querySelector("#pageNext").onclick=self.pageNext;
		document.querySelector("#elevatorValue").onchange=self.elevatorChange;
		self.elevatorValue=document.querySelector("#elevatorValue");
		self.renderAlbums();
	},
	//添加相冊點擊事件
	addAlbum(){
		let self=my;
		if(!self.albumName.value){
			alert("請輸入相冊名稱");
		}else{
			self.renderAlbums(self.albumName.value);
			self.albumName.value=""
		}
	},
	//相冊渲染事件
	renderAlbums(albumName){
		let self=my;
		if(albumName){
			self.albums.push({id:self.albums.length,name:albumName,photos:[]});
		}
		self.albumList.innerHTML="";
		self.albums.forEach((val,index)=>{
			let a=document.createElement("a");
			a.addEventListener("click",event=>{
				self.currentAlbumsId=index;
				self.renderPhotos();
			});
			a.innerText=val.name;
			a.href="#";
			self.albumList.appendChild(a);
		});
	},
	//圖片渲染
	renderPhotos(){
		let self=my;
		//點擊相冊添加樣式
		self.albums.forEach((val,index)=>{
			if(index===self.currentAlbumsId){
				self.albumList.children[index].classList.add('a-active');
			}else{
				self.albumList.children[index].classList.remove('a-active');
			}
		});
		//渲染圖片list
		self.photoList.innerHTML="";
		self.photo.data=self.albums[self.currentAlbumsId].photos;
		self.pagging.page=Math.ceil(self.photo.data.length/self.pagging.pageSize)===0?1:Math.ceil(self.photo.data.length/self.pagging.pageSize);
		self.pagging.total=self.photo.data.length;
		self.pageChange();
	},
	//添加圖片
	addPhoto(){
		let self=my;
		self.fileInput.click();
	},
	photoInput(){
		let self=my;
		const file=self.fileInput.files[0];
		const fr=new FileReader();
		fr.onload=function(){
			let img=new Image();
			img.src=fr.result;
			self.loadImage(img);
		}
		fr.readAsDataURL(file);
		//console.log("aaa:",self.fileInput.files[0]);
	},
	//加載圖片
	loadImage(img){
		let self=my;
		self.addImage(img);
		self.renderPhotos();
	},
	//增加圖片
	addImage(img){
		let self=my;
		self.albums[self.currentAlbumsId].photos.push(img);
	},
	/*************************分頁模塊***************************/
	//分頁圖片顯示
	renderPages(){
		let self=my;
		if(self.pagging.page>1){
			self.disablePrev=false;
			self.pagePrevValue.classList.remove('not-allow');
		}else{
			self.disablePrev=true;
			self.pagePrevValue.classList.add('not-allow');
		}
		if(self.pagging.page>=Math.ceil(self.photo.data.length/self.pagging.pageSize)){
			self.disableNext=true;
			self.pageNextValue.classList.add('not-allow');
		}else{
			self.disableNext=false;
			self.pageNextValue.classList.remove('not-allow');
		}
		self.pageTotal.innerHTML='共'+self.pagging.total+'條';
		self.pageCurrentPage.innerHTML=self.pagging.page;
		
	},
	pagePrev(){
		let self=my;
		if(self.disablePrev){
			return;
		}
		self.pagging.page--;
		self.pageChange();
	},
	pageNext(){
		let self=my;
		if(self.disableNext){
			return;
		}
		self.pagging.page++;
		self.pageChange();
	},
	//頁碼改變
	pageChange(){
		let self=my;
		self.photo.showData=self.photo.data.slice((self.pagging.page-1)*self.pagging.pageSize,self.pagging.page*self.pagging.pageSize);
		self.photoList.innerHTML='';
		self.photo.showData.forEach(img=>self.photoList.appendChild(img));
		self.renderPages();
	},
	//頁碼跳轉
	elevatorChange(){
		let self=my;
		let reg=/^[0-9]*$/;
		if(reg.test(self.elevatorValue.value)){
			if(self.elevatorValue.value>Math.ceil(self.pagging.total/self.pagging.pageSize)){
				return;
			}else{
				self.pagging.page=self.elevatorValue.value;
				self.pageChange();
			}
		}else{
			alert("請輸入正整數");
		}
	}
}
my.init();
